<template>
  <div class="app-container">
    <!--工具栏-->

    <el-steps :active="0" simple> </el-steps>
    <el-card v-if="active == 0">
        <div class="head-container">
      <!-- 搜索 -->
      <el-input
        v-model="query.value"
        clearable
        placeholder="输入搜索内容"
        style="width: 200px"
        class="filter-item"
        @keyup.enter.native="toQuery"
      />
      <el-button
        class="filter-item"
        size="mini"
        type="success"
        icon="el-icon-search"
        @click="toQuery"
        >搜索</el-button
      >
      <!-- 新增 -->
      <div style="display: inline-block; margin: 0px 2px">
        <el-button
          type="danger"
          class="filter-item"
          size="mini"
          icon="el-icon-refresh"
          @click="toQuery"
          >刷新</el-button
        >
      </div>
    </div>
      <el-table
        v-loading="loading"
        :data="data"
        size="small"
        style="width: 100%"
        @selection-change="handleSelectionChanges"
      >
        <el-table-column :selectable="checkboxT" type="selection" width="50" />
        <!--<el-table-column prop="id" label="商品id" />-->
        <el-table-column ref="table" prop="image" label="商品图片">
          <template slot-scope="scope">
            <a :href="scope.row.image" style="color: #42b983" target="_blank"
              ><img :src="scope.row.image" alt="点击打开" class="el-avatar"
            /></a>
          </template>
        </el-table-column>
        <el-table-column prop="storeName" label="商品名称" />
        <el-table-column prop="price" label="商品价格" />
        <el-table-column prop="stock" label="库存" />
        <el-table-column prop="num" label="数量">
          <template slot-scope="scope">
            <el-input-number
              prop="num"
              v-model="scope.row.num"
              :min="1"
              :max="scope.row.stock"
              label="购买数量"
            ></el-input-number>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-card v-show="active == 1">
      <Detail ref="hh" :is-add="isAdd" />
      
    </el-card>

    <el-card v-if="active == 2">
      <div class="title">订单</div>
    </el-card>
    <el-button style="margin-top: 12px" @click="handleProduct"
      >选择商品</el-button
    >
    <el-button style="margin-top: 12px" @click="handleOrder">订单</el-button>
    <!--分页组件-->
    <el-pagination
      :total="total"
      :current-page="page + 1"
      style="margin-top: 8px"
      layout="total, prev, pager, next, sizes"
      @size-change="sizeChange"
      @current-change="pageChange"
    />
  </div>
</template>

<script>
import initData from "@/mixins/crud";
import { del, onsale } from "@/api/yxStoreProduct";
import Detail from "./detail";
import EmitSale from './emitSale';
export default {
  components: {  Detail,EmitSale },
  mixins: [initData],
  data() {
    return {
      isAdd: false,
      active: 0,
      retailId: -1,
      storeName: null,
      dropDownValue: "",
      optionsMetaShow: [],
      multipleTable: [],
      delLoading: false,
      visible: false,
      queryTypeOptions: [{ key: "storeName", display_name: "商品名称" }],
      isAttr: false,
      cateId: null,
    };
  },
  created() {
    this.$nextTick(() => {
      this.retailId = JSON.parse(localStorage.getItem("SET_USER")).retail;
      this.init().then(() => {
        console.log(this.data);
        this.data.forEach(function (item, index) {
          item.num = 1;
        });
      });
    });
  },

  methods: {
    handleSelectionChanges(val) {
      this.multipleTable = val;
    },
    handleChange(value) {
      alert(value);
    },
    handleOrder() {
      //计算商品的总价
      if (this.multipleTable.length == 0) {
        this.$notify({
          title: "请先选择商品",
          type: "warning",
          duration: 2500,
        });
        return;
      }
      //遍历商品计算金额
      let totalPrice=0.00
      let payPrice=0.00
      let totalNum=0
     const products= this.multipleTable

     products.forEach((item)=>{
       totalNum+=item.num
       totalPrice +=item.num*item.price
       payPrice +=item.num*item.price
     })
    //  console.log(totalPrice,"商品总价")
    // console.log(payPrice,"实付")
    // console.log(totalNum,"数量")
    console.log(products)
      const _this = this.$refs.hh;
      _this.order = {
        statusName: "待支付",
        _status:1,
        orderId: '暂无',//虚拟单号
        payTypeName: "积分支付",
        pinkName: "暂无",//订单类型
        isChannel: 0, //支付渠道
        shippingType: 1,//快递类型 可选择
        deliverySn: '',//快递名称
        gainIntegral: 0.0,
        promotionInfo: "活动信息",
        realName: "真实姓名",
        userPhone: "1516338171",
        userAddress: "地球村",
        mark: "备货",
        remark: "备注",
        cartInfoList: products,
        payPrice: payPrice,
        totalPrice: totalPrice,
        payPostage: 0,
        couponPrice: 0,
        deductionPrice: 7777,//积分折扣
      };
  
      _this.userDTO = {
        nickname: "可选择 比传",
      };
      this.active = 1;
      this.isAdd = true;
    },
    handleProduct() {
      this.active = 0;
    },
    dataFilter(val) {
      this.value = val;
      if (val) {
        this.optionsMetaShow = this.cateList.filter((item) => {
          if (
            !!~item.label.indexOf(val) ||
            !!~item.label.toUpperCase().indexOf(val.toUpperCase())
          ) {
            return true;
          }
        });
      } else {
        this.optionsMetaShow = this.cateList;
      }
    },
    beforeInit() {
      this.url = "retail/stock/queryGoods";
      const sort = "id,desc";
      this.params = {
        page: this.page,
        size: this.size,
        sort: sort,
        storeName: this.storeName,
        id: this.retailId,
      };
      const query = this.query;
      const type = query.type;
      const value = query.value;
      if (type && value) {
        this.params[type] = value;
      }
      return true;
    },
    subDelete(id) {
      this.delLoading = true;
      del(id)
        .then((res) => {
          this.delLoading = false;
          this.$refs[id].doClose();
          this.dleChangePage();
          this.init();
          this.$notify({
            title: "删除成功",
            type: "success",
            duration: 2500,
          });
        })
        .catch((err) => {
          this.delLoading = false;
          this.$refs[id].doClose();
          console.log(err.response.data.message);
        });
    },
    onSale(id, status) {
      this.$confirm(`确定进行[${status ? "下架" : "上架"}]操作?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          onsale(id, { status: status }).then(({ data }) => {
            this.$message({
              message: "操作成功",
              type: "success",
              duration: 1000,
              onClose: () => {
                this.init();
              },
            });
          });
        })
        .catch(() => {});
    },
    //选择框
    checkboxT(row, rowIndex) {
      return row.id !== 1;
    },
  },
};
</script>

<style scoped>
</style>

